<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
</head>
<body>

<div th:replace="~{/common/header::header-body}"></div>


<div class="container mt-3" style="width: 1200px;">
    <ul class="list-group list-group-flush">
        <li class="list-group-item" th:each="article:${articles}">
            <div class="d-flex position-relative">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.pJ3LMah4CDR9Jw_DoZkmMgHaE4?w=247&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
                     class="flex-shrink-0 me-3" alt="blog">
                <div>
                    <h5 class="mt-0"><a class="page-link" th:text="${article.getTitle()}">标题</a></h5>
                    <p th:text="${article.getContent()}">内容</p>
                    <a th:href="@{'/article/'+${article.getId()}}" class="stretched-link">查看详细</a>
                </div>
            </div>
        </li>
    </ul>
</div>

<!--分页页面按钮-->
<div class="container mt-3">
    <ul class="pagination justify-content-center" style="margin:20px 0">
        <!--        上一页需要判断当前页是否已经是第一页-->
        <li class="page-item"><a class="page-link" th:href="@{'/page/'+${page==1?1:page-1}}">上一页</a></li>
        <!--        高亮当前页按钮-->
        <li th:each="i:${#numbers.sequence(1, totalPage)}" th:class="${page==i}?'page-item active':'page-item'">
            <a class="page-link" th:href="@{'/page/'+${i}}" th:text="${i}">1</a>
        </li>
        <!--        下一页需要判断当前页是否已经是最后一页-->
        <li class="page-item"><a class="page-link" th:href="@{'/page/'+${page==totalPage?totalPage:page+1}}">下一页</a>
        </li>
    </ul>
</div>


</body>
</html>